import { ArrowLeftOutlined } from "@ant-design/icons";
import { Button, Form, Input, Select } from "knowdesign";

import MysqlIcon from "@/pages/data-collect/data-source/icon/MysqlIcon";
import { SendOutlined } from "@ant-design/icons";
import React, { useState } from "react";
import "./index.less";
import TextArea from "knowdesign/lib/basic/input/TextArea";
import NetConfig from "../../NetConfig";
import IconRightArrow from "../../IconRightArrow";
import Header from "@/components/Header";

const App = ({ setDetail, setStep }) => {
  const [form] = Form.useForm();
  const [select1Value, setSelect1Value] = useState(null);
  const [select2Value, setSelect2Value] = useState(null);

  const sourceChange = (value) => {
    console.log(value);
    setSelect1Value(value);
  };

  const endChange = (value) => {
    console.log(value);
    setSelect2Value(value);
  };

  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Header title={"新建同步任务"} />

        <div>
          <Button
            // type="primary"
            shape="round"
            icon={<ArrowLeftOutlined style={{ paddingLeft: 8 }} />}
            size="small"
            onClick={() => {
              setDetail(false);
            }}
            style={{ padding: "0 8px" }}
          >
            返回&nbsp;&nbsp;&nbsp;&nbsp;
          </Button>
        </div>
      </div>

      <div
        style={{
          border: "1px solid rgba(0,0,0,0.14)",
          borderRadius: 8,
          marginTop: 24,
          padding: "16px 8px",
        }}
      >
        <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 19 }}>
          <div className="lf-dwh-baseInfo">基本配置：</div>
          <Form.Item
            label={
              <div style={{ height: 32, lineHeight: "33px" }}>
                数据来源与去向
              </div>
            }
            name="dsName"
            rules={[{ required: true, message: "数据来源与去向不能为空" }]}
          >
            <div style={{ display: "flex" }}>
              <Select
                showSearch
                placeholder="来源"
                optionFilterProp="children"
                onChange={sourceChange}
                suffixIcon={<SendOutlined />}
                style={{ width: "48%" }}
                filterOption={(input, option) =>
                  (option?.label ?? "")
                    ?.toLowerCase()
                    .includes(input.toLowerCase())
                }
              >
                <Option value="MySQL" key="MySQL">
                  <MysqlIcon height="20px" width="20px" />
                  <span style={{ marginLeft: 8 }}>MySQL</span>
                </Option>
              </Select>

              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  margin: "0 1%",
                }}
              >
                <IconRightArrow />
              </div>

              {/* <div style={{ display: "flex", alignItems: "center" }}>来源</div> */}
              <Select
                showSearch
                placeholder="去向"
                optionFilterProp="children"
                onChange={endChange}
                suffixIcon={<SendOutlined />}
                style={{ width: "48%" }}
                filterOption={(input, option) =>
                  (option?.label ?? "")
                    ?.toLowerCase()
                    .includes(input.toLowerCase())
                }
              >
                <Option value="MySQL" key="MySQL">
                  <MysqlIcon height="20px" width="20px" />
                  <span style={{ marginLeft: 8 }}>MySQL</span>
                </Option>
              </Select>
            </div>
          </Form.Item>
          <Form.Item
            label={
              <div style={{ height: 32, lineHeight: "33px" }}>新任务名称</div>
            }
            name="dsName"
            rules={[{ required: true, message: "新任务名称不能为空" }]}
          >
            <Input placeholder="新任务名称" maxLength={100} />
          </Form.Item>

          <Form.Item
            label={
              <div style={{ height: 32, lineHeight: "33px" }}>同步类型</div>
            }
            name="syncType"
            rules={[{ required: true, message: "同步类型不能为空" }]}
          >
            <Select
              options={[
                {
                  label: "单表离线",
                  value: "single",
                },
                {
                  label: "多表离线",
                  value: "multi",
                },
              ]}
            />
          </Form.Item>

          <Form.Item
            label={
              <div style={{ height: 32, lineHeight: "33px" }}>任务描述</div>
            }
            name="description"
          >
            <TextArea placeholder="任务描述" maxLength={200} />
          </Form.Item>
        </Form>
      </div>

      <div
        style={{
          border: "1px solid rgba(0,0,0,0.14)",
          borderRadius: 8,
          marginTop: 24,
          padding: "16px 8px",
          marginBottom: 26,
        }}
      >
        <div className="lf-dwh-baseInfo">网络与资源配置</div>

        <NetConfig />
      </div>

      <div className="dc-ui-pro-step-footer">
        <div className="dc-ui-pro-step-footer-main">
          <Button
            size="small"
            type="primary"
            onClick={() => {
              setStep(2);
            }}
          >
            下一步
          </Button>
        </div>
      </div>
    </>
  );
};

export default App;
